<template>
  <Loading  v-if="loading"></Loading>
  <div class="top" :style="{ backgroundImage: `url(${infoBg})` }">
    <div class="top-cloud">
      <img :src="cloud" alt="" />
    </div>
    <div class="top-logo">
      <img :src="logo" alt="" />
    </div>
  </div>
  <div class="info-top-content-panel-title">视频信息</div>

  <div class="display">
    <div v-if="show">
      <video
          ref="videoPlayer"
          style="height: 400px; width: 100%;"
          controls
          @loadedmetadata="videoLoaded">
        <source :src="videoSrc" :type="videoType">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</template>

<script setup>

import {ref, onMounted, getCurrentInstance, onBeforeMount} from 'vue';
import {useRouter} from "vue-router";
import toast from "vant/es/toast/index";
const infoBg = new URL('../../assets/img/info_bg.png', import.meta.url).href
const cloud = new URL('../../assets/img/cloud.png', import.meta.url).href
const logo = new URL('../../assets/img/logo.png', import.meta.url).href
const loading = ref(true)
const { proxy } = getCurrentInstance();
const show = ref(false)

const videoPlayer = ref(null);
// 假设 API 端点返回视频文件的 URL
// const videoUrl = '/api/get-video-url';
const traceData = ref({});
// src地址，type文件格式
//http://zs.xiaoqin.com.cn/xqc_doc/certificate/20240528/4qP4OXKD.mp4
const videoSrc = ref();
const videoType = ref('video/mp4');
/** 获取产品信息 */
const locationInfo = ref();


const getTraceBackData = async () => {
  try {
    let res = await proxy.$api.call("qin.getTraceBackData", {
      traceBack: traceabilityCode.value
    });
    if (!res.res) return;
    videoSrc.value = res?.video[0].url ?? ''
    if (videoSrc.value){
      show.value = true
    }
    
    console.log(show)
    
  } finally {
    loading.value = false;
  }
};
const traceabilityCode = ref("");
/**
 * 回到首页
 */
const gotoHome = () => {
  location.href = `./?traceabilityCode=${traceabilityCode.value}`;
};
onMounted(() => {
  traceabilityCode.value = useRouter().currentRoute.value.query.traceabilityCode;
  if (!traceabilityCode.value) {
    toast.fail("追溯信息不存在");
    loading.value = false;
    return;
  }
  console.log(videoSrc.value)
  if(!videoSrc.value){
    toast.fail("视频信息不存在");
    loading.value = false;
    return;
  }
  getTraceBackData();
});



document.title = '视频信息';
</script>


<style scoped>
.info-top-content-panel-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  margin: 8px 0 20px 0;

}
.display {
  height:400;
  margin: 5px auto 30px auto;
  background-color: #0000003b;
  position: relative;
  overflow: hidden;
  border-radius: 4px;

}
/*.display video {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*}*/
</style>
<style lang="less" scoped>
@import url(../../assets/css/common.less);
</style>
